import PermissionBtn from "@/components/PermissionBtn";
import { Button, Space, Table, TableProps, Pagination, Avatar, Modal } from "antd";
import { type Comment } from "@/types/content/comment";
import { useLinkComment } from "../hooks/useLinkComment";
import { ExclamationCircleFilled } from "@ant-design/icons";

export default function CommentList() {
   const {loading,tableData,pagination,setPagination,removeComment} = useLinkComment()
   const showConfirm = (row: Comment) => {
    Modal.confirm({
      title: "警告",
      icon: <ExclamationCircleFilled />,
      content: `确认删除?`,
      okText: "确认",
      cancelText: "取消",
      okType: "danger",
      onOk() {
        removeComment(row);
      },
    });
  };
  const columns: TableProps<Comment>["columns"] = [
    {
      title: "昵称",
      key: "username",
      dataIndex: "username",
      ellipsis: true,
      width: 180,
      align: "center",
    },

    {
      title: "头像",
      key: "avatar",
      dataIndex: "avatar",
      ellipsis: true,
      width: 100,
      align: "center",
      render: (_, { avatar }) => (
        <>{avatar && <Avatar size={50}  src={<img src={avatar} alt="avatar" />}/>}</>
      ),
    },
    {
      title: "回复目标用户",
      key: "toCommentUserName",
      dataIndex: "toCommentUserName",
      ellipsis: true,
      width: 180,
      align: "center",
    },
    {
      title: "内容",
      key: "content",
      dataIndex: "content",
      ellipsis: true,
      width: 180,
      align: "center",
    },
    
    {
      title: "更新时间",
      key: "updateTime",
      dataIndex: "updateTime",
      ellipsis: true,
      width: 180,
      align: "center",
    },

    {
      title: "操作",
      key: "action",
      fixed: "right",
      width: 100,
      align: "center",
      render: (_, row) => (
        <Space size={2} wrap>
          <PermissionBtn code="love.removeComment">
            <Button
              type="link"
              danger
              onClick={() => {
                showConfirm(row)
              }}
            >
              删除
            </Button>
          </PermissionBtn>
        </Space>
      ),
    },
  ];
  return (
    <div className="page__wrap--g" style={{padding:0}}>
      <div className="table__wrap--g no-page">
        <Table
          loading={loading}
          columns={columns}
          dataSource={tableData}
          rowKey="id"
          sticky
          bordered
          size="small"
          scroll={{ x: 1300 }}
          pagination={false}
        />
      </div>
      <div className="pagination__wrap--g">
        <Pagination
          pageSize={pagination.pageSize}
          current={pagination.pageNo}
          total={pagination.total}
          showQuickJumper={true}
          showTotal={(total) => `共${total}条`}
          onChange={(page, size) => {
            setPagination({
              total: pagination.total,
              pageNo: page,
              pageSize: size,
            });
          }}
        />
      </div>
    </div>
  );
}
